<template>

<div class="content-wrapper">
	<section class="wrapper">
		<div class="container py-14 pt-md-15 pb-md-18 pb-20 hero-banner">
			<div class="row text-center">
				<div class="col-lg-9 col-xxl-7 mx-auto" data-cues="zoomIn" data-group="welcome" data-interval="-200">

					<h1 class="display-1 fs-58 text-white text-shadow">Bico Global</h1>
					<h2 class="fs-16 text-uppercase ls-xl sub-head">星链矿机云算力全球站</h2>
					<p class="lead px-md-5 px-xl-15 px-xxl-10 mb-7 text-white text-shadow">欢迎来到 Bico 元宇宙，一个设置在宇宙中，基于区块链的元宇宙。您可以在其中探索、玩耍、交易和与其他玩家进行社交。</p>
				</div>
			</div>
			<div class="d-flex justify-content-center" data-cues="slideInDown" data-group="join" data-delay="900">
				<span>
					<a class="btn btn-lg btn-primary rounded-pill mx-1" href="/#/mstarch">在 Bico Global 上购买</a>
				</span>
				<span>
					<a class="btn btn-lg btn-outline-primary rounded-pill mx-1 text-white" href="javascript:;">阅读白皮书</a>
				</span>
			</div>

		</div>

	</section>

  <!-- 视频动画 -->

	<section class="wrapper bg-dark" id="about">
		<div class="container">
			<div class="row gx-lg-0 gy-10 align-items-center">
				
				<div class="col-lg-5 offset-lg-1">
					<h2 class="display-4 mb-3 text-white">什么是星链？</h2>
					<p class="lead fs-lg lh-sm sub-head">星链是一个有能力利用区块链和去中心化力量的项目，致力于无限发展和实践全新金融模式的真实愿景</p>
					<p class="text-white"> 人与人之间的互动和社交已经变得极其虚拟。大多数人已经将他们的社会和商务关系转移到手机和电脑上。现如今，全球疫情让我们沉浸网络的时间更远超以前。这些新习惯已经变成永久性的行为和文化转变，不可逆转地改变了我们思考和接受事物的方式。
					</p>
					<p class="text-white">在这种情况下，在虚拟空间下为个人发展和盈利，创造一个有趣的，自适应的环境是一种社会责任。这是我们星链的核心精神。</p>
					<!-- <a href="javascript:;" class="btn btn-primary rounded-pill mt-3">阅读白皮书</a> -->
				</div>

			</div>


		</div>

	</section>

  <!-- 模拟加入视频动画科技感 -->

	<section class="wrapper stars-bg" id="eco">
		<div class="container py-8 py-md-10">
			<div class="row gx-lg-8 pt-16 gx-xl-12 gy-10 mb-14 mb-md-17 align-items-center">
				<div class="col-lg-6 position-relative order-lg-2">
					<div class="col-lg-6 position-relative order-lg-2 video-container order-2">
						<video width="1080" height="1080" playsinline="" autoplay="" muted="" loop="">
							<source src="@/starchainminer/static/videos/video_2022-05-29_12-29-40.mp4" type="video/mp4">
							Your browser does not support the video tag.
						</video>
					</div>
				</div>

				<div class="col-lg-6">
					<h2 class="fs-15 text-uppercase text-line text-primary mb-3 sub-head">一个蓄势待发的生态系统</h2>
					<h3 class="display-5 mb-7 text-white">我们实际上正在建造一个空间站。</h3>
					<p class="lead fs-lg text-white">数字房地产已经成为了一种合法的资产类型，值得投资者考虑，该类资产在短期内呈指数级升值。</p>
					<p class="mb-6 text-white">基于这个观点下，星链代币成了在星链站内购买虚拟土地的投资工具，它会模拟一个位于银河系真实象限的真实世界空间站。以下是星链生态系统的一些关键点。 </p>
					<div class="row gy-3 gx-xl-8">
						<div class="col-xl-6">
							<ul class="icon-list bullet-bg bullet-soft-primary mb-0">
								<li>
									<span>
										<i class="uil uil-coins"></i>
									</span>
									<span class="text-white-50">
										<h4 class="text-white">STARL 代币</h4> 由以太链支撑的实用代币，在星链生态系统中作为基础，服务各种应用。
									</span>
								</li>
								<li class="mt-3">
									<span>
										<i class="uil uil-puzzle-piece"></i>
									</span>
									<span class="text-white-50">
										<h4 class="text-white">SATE NFTs</h4>非同质化的，可转让的数字资产，相当于卫星和在星链元宇宙中任何其他的数字财产。
									</span>
								</li>
								<li class="mt-3">
									<span>
										<i class="uil uil-star"></i>
									</span>
									<span class="text-white-50">
										<h4 class="text-white">宇宙</h4>星链生态系中一个游戏化的 3D 元宇宙虚拟空间
									</span>
								</li>
							</ul>
						</div>

						<div class="col-xl-6">
							<ul class="icon-list bullet-bg bullet-soft-primary mb-0">
								<li>
									<span>
										<i class="uil uil-users-alt"></i>
									</span>
									<span class="text-white-50">
										<h4 class="text-white">简介</h4> 星链生态系统是一个通过图形化来展现STRAL用户的地方，这些用户位于元宇宙虚拟空间内。
									</span>
								</li>
								<li class="mt-3">
									<span>
										<i class="uil uil-money-insert"></i>
									</span>
									<span class="text-white-50">
										<h4 class="text-white">星链 DAO</h4>STARL 代币在星链生态系统中会被应用于在DAO的投票，以确保这个项目能够自我维持以及没有掌控者。
									</span>
								</li>
								<li class="mt-3">
									<span>
										<i class="uil uil-cart"></i>
									</span>
									<span class="text-white-50">
										<h4 class="text-white">市场</h4>星链市场使参与者能管理和交易 SATE NFTs, 这些NFT以STARL定价。
									</span>
								</li>
							</ul>
						</div>

					</div>
				</div>

			</div>

		</div>
	</section>
<Foot />

</div>
    

</template>

<script>
import Foot from '@/components/Foot'

import "@/starchainminer/static/css/purple.css";

export default {

    data(){
        return{
          
        }
    },

    created(){
      
    },

    methods:{
      
    },

    components: {
			    
		 Foot,
		},

}
</script>

<style lang="less" scoped>

.content-wrapper{

  background: #21153b url(../starchainminer/static/image/bg-middle1.jpg) top center no-repeat;
  background-size: 100%;

}


.stars-bg {
    background: #21153b url(../starchainminer/static/image/bg-stars.png) top center no-repeat;
    background-size: 100%;
}

.navbar-dark .navbar-brand img {
    width: 50%;
}

.display-1 {
    font-family: 'archery_black_roundedregular';
    font-size: 6rem!important;
    text-transform: uppercase;
    font-weight: normal!important;
}

.hero-banner {
    
    padding-top:30%!important;
}

video {mix-blend-mode:screen;}

.bg-dark {
    background-color: #21153b00 !important;
}

.sub-head {
    color: #FFAE1E!important;
}

.text-shadow {
    text-shadow: 1px 1px 3px #372677;
}

.icon-list.bullet-soft-primary.bullet-bg .completed {
    text-decoration: line-through;
}

.icon-list.bullet-soft-primary.bullet-bg .completed i {
    background-color: green!important;
    color: white!important;
}

.intro {color: #fff!important; display: block; margin-bottom: 0;}
.intro:before, .intro:after{
    position: absolute;
    top: 51%;
    overflow: hidden;
    width: 10%;
    height: 1px;
    left: 35%;
    content: '\a0';
    background-color:rgba(255, 255, 255, 0.4);
}
.intro:after {
    left: auto;
    right: 35%;
    text-align: right;
    
}

.col-lg-6 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 24%;
}

.col-lg-5 {
        flex: 0 0 auto;
        width: 100%
}

.col-xxl-7 {
        flex: 0 0 auto;
        width: 100%
}

.col-xl-6 {
        flex: 0 0 auto;
        width: 100%
}

a{
    text-decoration: none;
    color: #ffffff;
}

</style>
